<template>
    <div class="product-navCoten" >
        <div class="product-nav">
            <div class="product-navTitle">{{navList.title}}</div>
            <span>更多 ></span>
            <ul>
                <li v-for="y in navList.titleList" :key="y.id">{{y.name}}</li>
            </ul>
            <div style="clear: both"></div>
        </div>
        <div v-if="navList.sort===1" class="sort">
        <div class="sort-top">
       <ul>
           <li>智能排序</li>
           <li>最新上架</li>
           <li>价格排序</li>
       </ul>
            <div class="inp">
                <Input v-model="value" placeholder="￥" style="width: 85px" /> —— <Input v-model="value" placeholder="￥" style="width: 85px" />
                <span>确定</span>
            </div>
        </div>
            <div class="sale-optionBtn">
                <CheckboxGroup v-model="social">
                    <Checkbox label="twitter">
                        <span>支持保险</span>
                    </Checkbox>
                    <Checkbox label="github">
                        <span>尾款红包</span>
                    </Checkbox>
                    <Checkbox label="snapchat">
                        <span>限时秒杀</span>
                    </Checkbox>
                    <Checkbox label="123">
                        <span>日记返现</span>
                    </Checkbox>
                </CheckboxGroup>
            </div>
        </div>
             <product-Reservation :width="width" v-if="navList.type===1" :movieList="navList.child"></product-Reservation>
             <doctor :movieList="navList.child"  v-if="navList.type===2" :width="width"></doctor>
             <follow-circle :movieList="navList.child"  v-if="navList.type===3"></follow-circle>
             <do-Project :movieList="navList.child" v-if="navList.type===4"></do-Project>
             <album :movieList="navList.child" v-if="navList.type===5"></album>
             <my-diary v-if="navList.type===6"></my-diary>
             <cricle-con v-if="navList.type===7" :movieList="navList.child" :width="width" :height="height"></cricle-con>
            <div style="clear: both"></div>
    </div>
</template>

<script>
    import productReservation from '../ProductReservation/index.vue'
    import Doctor from '../ProductReservation/doctor.vue'
    import FollowCircle from '../ProductReservation/FollowCircle.vue'
    import DoProject from '../ProductReservation/DoProject.vue'
    import Album from '../ProductReservation/Album.vue'
    import MyDiary from '../Usertop/MyDiary.vue'
    import CricleCon from '../../components/Business/CricleCon'
    export default {
        name: "productNav",
        props: ['navList', 'width','height'],
        components: {
            productReservation,
            Doctor,
            FollowCircle,
            DoProject,
            Album,
            MyDiary,
            CricleCon
        },
        data () {
            return {
              value:'',
                social: ['twitter'],
            }
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .product-navCoten{
        .sort{
            height: 77px;
            border: solid 1px #dddddd;
            margin-bottom: 20px;
            .sort-top{
                height: 42px;
                background-color: #f5f5f5;
                border-bottom: solid 1px #dddddd;
                ul{
                    float: left;
                    li{
                        float: left;
                        width: 112px;
                        border-right: solid 1px #dddddd;
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                        font-size: 12px;
                        color: #666666;
                    }
                }
                .inp{
                    height: 40px;
                    line-height: 40px;
                    >:first-child{
                        margin-left:10px;
                    }
                    >span{
                        background-color: @theme-color-dark;
                        padding: 5px 15px;
                        color: white;
                        border-radius: 2px;
                        font-size: 14px;
                        margin-left: 25px;
                    }
                }
            }
            .sale-optionBtn{
                padding-top: 8px;
                height: 36px;
                padding-left: 10px;
            }
        }
    }
    .product-nav{
        border-bottom: 1px  solid #ff536f;
        margin-bottom: 20px;
        .product-navTitle{
            border-bottom: 2px solid #ff536f;
            color: #ff536f;
            font-size: 20px;
            text-align: center;
            float: left;
            padding-bottom: 10px;
            padding-top: 10px;
        }
        span{
            color:#ff536f;
            float: right;
            font-size: 14px;
            line-height: 50px;
            margin-right: 20px;
            cursor:pointer;

        }
        ul{
            float: right;
            margin-right: 25px;
           li{
               float: left;
               font-size: 14px;
               color: #999999;
               padding: 0 8px 0 8px;
               cursor:pointer
           }
            li:hover{
                color:#ff536f;
            }
        }

    }
</style>